<template>
  <h2 v-memo="[count]">{{ msg }}</h2>
  <h2>{{ msg }}</h2>
  <h2>count {{ count }}</h2>
  <h2 v-html="p"></h2>
  <h2 v-text="p"></h2>

  <button @click="editMsgHandler">修改msg</button>
  <button @click="editCountHandler">修改count</button>
  <!-- <input type="text" :value="msg" /> -->
  <!-- <input
    type="text"
    :value="msg"
    @input="($event:any) => (msg = $event.target.value)"
  /> -->
  <!-- 
    vue中常用的指令：
      v-model:双向数据绑定
        用在text框上，相当于是给文本框绑定了value属性和input事件
        用在checkbox上，相当于是给多选框绑定checked属性和change事件
        用在radio上，相当于是给单选框绑定checked属性和change事件
        用在select上，相当于是给下拉选框绑定value属性和change事件
      v-bind
        单项数据绑定（强制数据绑定）
      v-on
        绑定事件，可以简写成 @
      v-if
        条件渲染
        控制是否删除DOM来控制元素显式隐藏
      v-show
        条件渲染
        通过控制css来控制元素显式隐藏
        v-if使用场景：元素不会频繁切换显式隐藏，DOM结构不会太复杂
        v-show使用场景：元素会频繁切换显式隐藏，DOM结构复杂
      v-for
        列表渲染
      v-memo
        新增的指令，实现通过依赖项来控DOM是否重新渲染
      v-html
        功能类似于innerHTML,会解析标签
      v-text
         功能类似于innerText,不会解析标签
   -->
</template>
<script lang="ts" setup>
import { ref } from "vue";
const count = ref(0);
const msg = ref("hello");
const p = ref("<p>111111</p>");
const editMsgHandler = () => {
  msg.value = msg.value + 1;
};
const editCountHandler = () => {
  count.value = count.value + 1;
};
</script>

<style lang="less" scoped></style>
